<template>
  <div class="home-top-index">
    <el-tabs v-model="album">
      <el-tab-pane label="专 辑" name="album" style="padding: 0 10px">
        <el-skeleton class="mt-10 mb-10" :rows="8" animated v-if="loading"/>
        <div v-if="!loading">
          <div v-if="dictumAlbumListArr.length>0">
            <div v-for="(item,index) in dictumAlbumListArr" :key="index" :ref="`userAdminAlbumManageItem${index}`">
              <div class="album-info-cl">
                <div class="fl-right cursor-pointer" title="更多...">
                  <el-dropdown size="medium" trigger="click">
                    <div class="el-dropdown-link">
                      <i class="el-icon-more"></i>
                    </div>
                    <el-dropdown-menu>
                      <el-dropdown-item @click.native="updateAlbum(item)">更新专辑</el-dropdown-item>
                      <el-dropdown-item @click.native="deleteAlbum(item)">删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
                <div class="flex-left">
                  <div>
                    <el-image v-if="item.cover" style="height: 100px;width: 120px;border-radius: 2px" :src="item.cover"
                              fit="cover"></el-image>
                    <el-image v-else style="height: 80px;width: 120px;border-radius: 2px"
                              src="/img/shu.jpg" fit="cover"></el-image>
                  </div>

                  <div class="mr-2 ml-10" style="height: 70px">
                    <nuxt-link :to="`/external_info/album-info?data=`+item.id" target="_blank" rel="noopener">
                      <div class="font-bold cursor-pointer overflow-nowrap-1">
                        <span class="text-underline">{{ item.name }}</span>
                        <span class="font-s-13 line-height-24 color-grey-2 ml-10">
                        创建时间：{{ $utils.parseTime(item.createTime, '{y}-{m}-{d} {h}:{i}') }}
                        </span>
                      </div>
                      <p class="font-s-13 line-height-24 color-grey mt-10 overflow-nowrap-2">{{
                          item.briefIntroduction
                        }}</p>
                    </nuxt-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="dictumAlbumListArr.length==0" class="text-center">
            <svg t="1682476949715" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1648" width="50" height="50">
              <path
                d="M491.12588 196.681c0 13.868-11.26 25.095-25.107 25.095H365.56188a25.11 25.11 0 0 1-17.762-7.344 25.135 25.135 0 0 1-7.361-17.751c0-13.864 11.249-25.113 25.124-25.113h100.457c13.846-0.001 25.106 11.249 25.106 25.113z m136.727 0c0 13.868-7.915 25.095-17.682 25.095h-70.667c-9.778 0-17.682-11.237-17.682-25.095 0-13.864 7.903-25.113 17.682-25.113h70.667c9.767-0.001 17.682 11.249 17.682 25.113zM781.32088 298.526a29.297 29.297 0 0 1-29.313 29.303H461.81388c-16.178 0-29.295-13.117-29.295-29.302 0-16.177 13.118-29.295 29.295-29.295h290.195a29.303 29.303 0 0 1 20.727 8.575 29.306 29.306 0 0 1 8.585 20.719z m78.135 104.634c0 15.416-12.494 27.916-27.915 27.916H393.45588c-15.416 0-27.91-12.494-27.91-27.91 0-15.41 12.495-27.909 27.91-27.909H831.53088c15.415 0 27.915 12.489 27.925 27.903z m25.113 99.073a29.313 29.313 0 0 1-8.58 20.725 29.287 29.287 0 0 1-20.721 8.586h-80.938c-16.189 0-29.307-13.123-29.307-29.306 0-16.185 13.117-29.308 29.307-29.308h80.938c7.77 0 15.223 3.088 20.721 8.58a29.328 29.328 0 0 1 8.58 20.723z m-161.85 0c0 16.192-19.491 29.311-43.589 29.311H118.90088c-24.055 0-43.558-13.106-43.558-29.311 0-16.186 19.502-29.303 43.558-29.303h560.229c24.098 0.001 43.589 13.118 43.589 29.303z m0 0"
                fill="#E3EDF1" p-id="1649"></path>
              <path
                d="M245.56088 562.214a30.712 30.712 0 0 1-8.994 21.719 30.661 30.661 0 0 1-21.714 8.988h-41.856c-16.955 0-30.697-13.74-30.697-30.697 0-16.951 13.742-30.691 30.697-30.691h41.856a30.695 30.695 0 0 1 30.708 30.681z m0 0"
                fill="#E3EDF1" p-id="1650"></path>
              <path
                d="M546.92488 622.212a33.522 33.522 0 0 1-9.805 23.689 33.495 33.495 0 0 1-23.685 9.811H33.48888A33.492 33.492 0 0 1 4.48988 638.97a33.46 33.46 0 0 1 0-33.488 33.483 33.483 0 0 1 28.999-16.748h479.946a33.482 33.482 0 0 1 23.679 9.805 33.457 33.457 0 0 1 9.811 23.673z m429.73 118.303c-0.006 18.326-14.857 33.18-33.184 33.186H543.83688c-17.993-0.469-32.329-15.191-32.329-33.186 0-17.996 14.336-32.715 32.329-33.186H943.46088c18.326 0.01 33.183 14.861 33.194 33.186z m0 0"
                fill="#E3EDF1" p-id="1651"></path>
              <path
                d="M641.80188 797.718a24.01 24.01 0 0 1-24.028 24.015H584.88088c-13.263 0-24.018-10.748-24.018-24.016 0-13.264 10.755-24.018 24.018-24.018h32.893c13.262 0.005 24.017 10.755 24.028 24.019z m0 0"
                fill="#E3EDF1" p-id="1652"></path>
              <path
                d="M909.70288 845.665a23.93 23.93 0 0 1-7.018 16.932 23.967 23.967 0 0 1-16.935 6.996H439.68688c-13.214 0-23.926-10.713-23.926-23.928s10.712-23.932 23.926-23.932H885.75088c13.229 0 23.952 10.711 23.952 23.932z m92.054 0c0 13.209-10.707 23.922-23.921 23.928H958.73088c-13.22 0-23.932-10.713-23.932-23.928s10.712-23.932 23.932-23.932h19.104c13.199 0 23.922 10.711 23.922 23.932z m0 0"
                fill="#E3EDF1" p-id="1653"></path>
              <path
                d="M708.23688 210.098H289.12288s-32.227-4.026-34.262 38.291c-2.02 42.305 0 486.035 0 543.744-0.677 47.117 57.732 57.383 78.587 30.553 28.216-34.246 10.078-74.561 4.043-76.584-6.062-2.031 392.934 0 392.934 0V264.5c-0.001 0 5.562-54.515-22.188-54.402z m0 0"
                fill="#FFFFFF" p-id="1654"></path>
              <path
                d="M300.61188 842.454c-14.448 0-28.14-5.471-37.553-15.045-8.966-9.096-13.605-21.328-13.402-35.357 0-12.902-0.102-45.41-0.236-88.504-0.461-147.648-1.332-422.482 0.236-455.407 1.53-31.97 20.248-43.353 37.249-43.353 1.803 0 2.871 0.146 2.871 0.146l418.46-0.033c6.804 0 12.468 2.507 16.951 7.464 14.031 15.528 10.563 51.164 10.417 52.673l0.032 486.307-5.235-0.02c-0.011 0-177.319-0.902-293.733-0.902-52.776 0-77.653 0.193-89.111 0.396 2.002 4.119 3.275 8.275 3.667 9.66 3.12 10.898 8.017 39.084-13.756 65.514-8.097 10.426-21.565 16.461-36.857 16.461z m-13.706-627.255c-7.588 0-25.393 3.27-26.843 33.436-1.557 32.655-0.697 307.319-0.236 454.874 0.135 43.107 0.236 75.641 0.236 88.623-0.16 11.26 3.431 20.898 10.401 27.959 7.49 7.592 18.471 11.945 30.148 11.945 12.05 0 22.52-4.568 28.711-12.553 13.832-16.779 15.169-34.219 13.875-45.908-1.407-12.756-6.304-21.51-8.005-22.836-1.836-0.52-3.334-2.975-2.916-5.508 0.328-2.047 0.526-3.287 6.846-4.039v-0.016l0.021 0.016c9.853-1.176 34.525-1.176 97.503-1.176 104.612 0 258.397 0.725 288.541 0.871V264.5c0.945-9.535 1.316-35.131-7.748-45.167a11.582 11.582 0 0 0-9.144-4.032H289.12288c-0.73-0.043-1.316-0.102-2.217-0.102z m0 0"
                fill="#21a2db" p-id="1655"></path>
              <path
                d="M309.11288 301.808h368.68v101.289h-368.68V301.808z m0 136.023h348.963v21.826H309.11288v-21.826z m0 53.941h184.332v21.82H309.11288v-21.82z m0 63.01H612.50088v21.826H309.11288v-21.826z m0 62.645h223.292v21.822H309.11288v-21.822z m543.465 83.677c9.053 9.043 11.608 21.393 5.719 27.578-5.863 6.18-18.004 3.85-27.035-5.213l-86.877-86.922c-9.031-9.043-11.598-21.398-5.687-27.576 5.858-6.186 17.998-3.852 27.014 5.213l86.866 86.92z m0 0"
                fill="#D0EAF1" p-id="1656"></path>
              <path
                d="M849.45888 734.749c-6.658 0-14.154-3.523-20.044-9.434l-86.867-86.922c-10.201-10.201-12.709-23.918-5.729-31.217 6.642-7.021 20.988-4.58 30.739 5.184l86.856 86.918c10.201 10.182 12.747 23.895 5.761 31.201-2.641 2.793-6.346 4.27-10.716 4.27zM747.51488 608.122c-2.014 0-4.864 0.451-6.921 2.637-4.864 5.068-2.266 16.039 5.638 23.953l86.866 86.92c4.94 4.941 11.056 7.893 16.361 7.893 2.024 0 4.875-0.449 6.948-2.637 4.854-5.078 2.238-16.043-5.665-23.938l-86.861-86.93c-4.935-4.945-11.05-7.898-16.366-7.898z m0 0"
                fill="#21a2db" p-id="1657"></path>
              <path
                d="M736.97488 611.364c-6.652 1.988 2.48-3.869-0.811 4.291-1.203 7.02 1.67 12.877 6.975 18.258l82.49 83.922c8.495 8.674 25.473 17.467 29.64 12.254 0.43-0.553 0.913-1.037 1.326-1.568l-119.62-117.157z m0 0"
                fill="#21a2db" p-id="1658"></path>
              <path
                d="M751.42388 458.224c-47.632-47.643-125.172-47.643-172.836 0.023-47.691 47.641-47.702 125.219-0.032 172.883 47.675 47.633 125.226 47.633 172.868 0 47.642-47.664 47.642-125.264 0-172.906"
                fill="#FFFFFF" p-id="1659"></path>
              <path
                d="M664.99788 672.062a126.68 126.68 0 0 1-90.126-37.258 126.54 126.54 0 0 1-37.274-90.131c0-34.086 13.257-66.098 37.296-90.117a126.572 126.572 0 0 1 90.12-37.274 126.6 126.6 0 0 1 90.083 37.249c49.688 49.693 49.688 130.568 0 180.273a126.577 126.577 0 0 1-90.099 37.258z m0.026-244.363c-31.293 0-60.685 12.164-82.753 34.23a116.226 116.226 0 0 0-34.257 82.754c0 31.305 12.15 60.697 34.219 82.764 22.074 22.063 51.461 34.197 82.765 34.197s60.685-12.135 82.742-34.197c45.641-45.65 45.641-119.898 0-165.527a116.105 116.105 0 0 0-82.716-34.221z m0 0"
                fill="#21a2db" p-id="1660"></path>
              <path
                d="M732.10988 516.892h-14.965v-5.214h14.965v5.214z m-30.594 0H685.89088v-5.214h15.625v5.214z m-31.245 0h-15.63v-5.214h15.63v5.214z m-31.261 0H623.39088v-5.214h15.619v5.214z m-31.234 0h-15.631v-5.214h15.631v5.214z m85.734-42.629h-15.625v-5.215h15.625v5.215z m-31.245 0h-15.619v-5.215h15.619v5.215z m-31.25 0h-15.63v-5.215h15.63v5.215z m115.545 98.347h-14.605v-5.215h14.605v5.215z m-30.225 0H700.72088v-5.215h15.614v5.215z m-31.245 0h-15.63v-5.215h15.63v5.215z m-31.25 0h-15.63v-5.215h15.63v5.215z m-31.261 0h-15.614v-5.215h15.614v5.215z m-31.233 0h-15.631v-5.215h15.631v5.215z m108.505 52.28h-15.63v-5.213h15.63v5.213z m-31.261 0h-15.614v-5.213h15.614v5.213z m-31.234 0h-15.631v-5.213h15.631v5.213z m0 0M331.66988 742.519s38.337 72.16-33.065 94.742c0 0-3.828-0.412 0 0 79.994-0.717 460.272 1.988 460.272 1.988s30.224-18.832 38.547-39.303c8.285-20.447-6.046-49.33-18.144-57.732-26.417-2.578-447.61 0.305-447.61 0.305z m0 0"
                fill="#CEE7EE" p-id="1661"></path>
              <path
                d="M759.61188 841.849h-0.757c-2.959-0.023-297.074-2.105-420.388-2.105-16.484 0-30.01 0.031-39.443 0.113l-0.145 0.053-4.236-0.461-0.328-2.518 0.134-2.471h2.47l0.279 0.037v-0.016l1.16 0.127c18.916-6.092 31.438-16.365 37.236-30.52 11.104-27.113-6.046-60.029-6.212-60.357l-2.019-3.791 4.291-0.035c2.019-0.014 202.814-1.369 334.316-1.369 67.987 0 106.207 0.359 113.574 1.078l0.671 0.07 0.563 0.379c13.424 9.322 27.669 39.66 19.067 60.854-8.549 21.012-38.312 39.74-39.584 40.539l-0.649 0.393z m-421.145-7.309c120.216 0 402.722 1.982 419.658 2.105 4.312-2.803 29.623-19.818 36.888-37.678 7.78-19.232-5.955-46.205-16.667-54.221-8.692-0.666-46.482-0.986-112.376-0.986-121.043 0-300.816 1.158-330.171 1.334 4.403 9.854 14.449 36.916 4.628 60.955-4.999 12.242-14.401 21.799-28.039 28.533 7.421-0.032 16.216-0.042 26.079-0.042z m0 0"
                fill="#21a2db" p-id="1662"></path>
              <path
                d="M1021.33888 359.582c0 20.925-17.252 37.894-38.477 37.894H814.41788c-21.241 0-38.478-16.969-38.478-37.894v-12.837c0-20.919 17.236-37.903 38.478-37.903h168.444c21.225 0 38.477 16.973 38.477 37.903v12.837z m0 0"
                fill="#FFFFFF" p-id="1663"></path>
              <path
                d="M982.86188 399.435H814.41788c-22.288 0-40.438-17.869-40.438-39.853v-12.837c0-21.978 18.139-39.847 40.438-39.847h168.444c22.282 0 40.437 17.87 40.437 39.847v12.837c-0.011 21.973-18.154 39.853-40.437 39.853z m-168.444-88.633c-20.136 0-36.522 16.125-36.522 35.943v12.837c0 19.819 16.387 35.944 36.522 35.944h168.444c20.135 0 36.517-16.125 36.517-35.944v-12.837c0-19.818-16.382-35.943-36.517-35.943H814.41788z m0 0"
                fill="#5BB6D2" p-id="1664"></path>
              <path
                d="M848.57788 437.154l14.739-41.628h54.456l-69.195 41.628z m17.499-37.719l-10.181 28.768 47.793-28.768h-37.612z m0 0"
                fill="#5BB6D2" p-id="1665"></path>
              <path
                d="M864.41188 407.284l5.687-16.699 15.706-3.232 15.979 3.491 5.316 2.667 3.624 0.415L883.06088 410.5l-18.649-3.216z m0 0"
                fill="#FFFFFF" p-id="1666"></path>
              <path
                d="M904.38788 340.441a11.74 11.74 0 1 0-5.986 21.848 11.745 11.745 0 0 0 17.719-10.465c-0.194-6.341-5.391-11.383-11.733-11.383zM833.59188 340.441c-6.347-0.005-11.544 5.031-11.742 11.372a11.735 11.735 0 0 0 5.756 10.476 11.739 11.739 0 0 0 11.952 0.005 11.736 11.736 0 0 0 5.767-10.47c-0.194-6.341-5.386-11.383-11.733-11.383zM975.18388 340.441c-6.347-0.005-11.55 5.031-11.748 11.372a11.747 11.747 0 1 0 23.481 0.011c-0.194-6.341-5.393-11.383-11.733-11.383z"
                fill="#21a2db" p-id="1667"></path>
            </svg>
            <p class="font-s-16 color-grey">暂无数据</p>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="专辑更新"
      :visible.sync="updateLoading"
      width="30%">
      <el-form :model="albumInfo" :rules="albumInfoRules" ref="albumInfo" label-width="100px" class="demo-ruleForm">
        <el-form-item label="专辑名称：" prop="name">
          <el-input v-model="albumInfo.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="简介：" prop="briefIntroduction">
          <div class="border-all-1-DCDFE6 border-radius-4">
            <el-input type="textarea" maxlength="200"
                      :rows="6"
                      clearable
                      show-word-limit v-model="albumInfo.briefIntroduction"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="封面：">
          <div class="articleCoverCa">
            <imageUpload v-model="albumValue" :limit="1"/>
          </div>
        </el-form-item>
        <el-form-item label="专辑状态：" prop="albumState">
          <el-radio-group v-model="albumInfo.albumState">
            <el-radio :label="1">公开</el-radio>
            <el-radio :label="2">私有</el-radio>
            <!--            <el-radio :label="3">粉丝可看</el-radio>-->
          </el-radio-group>
        </el-form-item>
        <el-form-item class="text-right">
          <el-button size="medium" @click="updateLoading = false">取消</el-button>
          <el-button size="medium" type="primary" @click="updateAlbums()" :loading="buttonLoading">更新专辑</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {createAnimator} from '~/plugins/animationUtils'

export default {
  name: "albumManage",
  data() {
    return {
      buttonLoading: false,
      albumValue: [],
      albumInfo: {
        id: null,
        name: null,
        briefIntroduction: null,
        albumState: null,
      },
      albumInfoRules: {
        name: [
          {required: true, message: '请输入专辑名称', trigger: 'blur'},
        ],
        albumState: [
          {required: true, message: '请选择专辑状态', trigger: 'blur'},
        ],
      },
      updateLoading: false,
      cover: "",
      album: 'album',
      loading: true,
      dictumAlbumListArr: [],
      queryParams: {
        pageNum: 1,
        pageSize: 100,
      },
      animator: null, // 动画器实例
    }
  },
  methods: {
    updateAlbums() {
      this.buttonLoading = true;
      if (this.albumValue.length != 0) {
        this.albumInfo.cover = this.albumValue[0].url;
      }
      this.$API("/frontDesk/dictum/album", "put", null, this.albumInfo).then(res => {
        if (res.cone = 200) {
          this.$modal.msgSuccess("更新成功!");
          this.dictumAlbumRoleLists();
        }
      }).finally(() => {
        this.updateLoading = false;
        this.buttonLoading = false;
      });
    },
    updateAlbum(item) {
      this.albumInfo = null;
      this.albumValue = [];
      if (item.cover != null) {
        this.albumValue.push({url: item.cover})
      }
      this.albumInfo = item;
      this.updateLoading = true;
    },
    deleteAlbum(item) {
      this.$modal.confirm('确认要删除《' + item.name + '》专辑吗？').then(() => {
        this.loading = true;
        return this.$API("/frontDesk/dictum/album/" + item.id, "delete");
      }).then(res => {
        this.dictumAlbumRoleLists();
        this.$modal.msgSuccess("删除成功!");
      }).finally(() => this.loading = false)
    },
    dictumAlbumRoleLists() {
      this.loading = true;
      this.$API("/frontDesk/dictum/album/role/list", "get", this.queryParams).then(res => {
        this.dictumAlbumListArr = res.rows;
      }).finally(() => {
        this.loading = false;
        this.animator.triggerAllItemsAnimation(this.dictumAlbumListArr, 'userAdminAlbumManageItem');
      })
    }
  },
  mounted() {
    this.animator = createAnimator(this, 'commonList')
    this.dictumAlbumRoleLists();
  }
}
</script>

<style scoped>
.album-info-cl {
  padding: 12px;
  margin-bottom: 20px;
  transition: .2s;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 #ecf0f1;
  border: 1px solid #fef0f0;
}

.album-info-cl:hover {
  border-bottom: 1px solid var(--hover-color);
}

.home-top-index {
  background-color: #FFFFFF;
  border-radius: 4px;
  padding: 10px;
  min-height: 100px;
}
</style>
